<template>
  <div class="p-20 uppercase">
    <h1 @click="counter.increment" class="select-none cursor-pointer">theme setting {{ counter.count }}</h1>
    <el-input class="my-20" v-model="scontext"></el-input>
    <el-button @click="shiftDark()">aaaa</el-button>
    cccder
    <div class="flex-row my-20">
      <el-color-picker v-for="(item, key) in LayoutState.theme.colors" :key="item+key" size="large" v-model="LayoutState.theme.colors[key]" @change="saveColor"></el-color-picker>
    </div>
    
    <div class="h-auto mb-5 flex-row flex-wrap" style="">
      <div class="w-1/4 flex-col h-100 p-5">
        <div class="flex-col grow-1 rounded-lg overflow-hidden">
          <div class="bg-p-10 grow-1 flex-col px-20 justify-center text-white">
            {{ LayoutState.theme.colors['primary'] }}
          </div>
          <div class="h-40 flex-row">
            <span class="h-40 grow-1 bg-p-9"></span>
            <span class="h-40 grow-1 bg-p-8"></span>
            <span class="h-40 grow-1 bg-p-7"></span>
            <span class="h-40 grow-1 bg-p-6"></span>
            <span class="h-40 grow-1 bg-p-5"></span>
            <span class="h-40 grow-1 bg-p-4"></span>
            <span class="h-40 grow-1 bg-p-3"></span>
            <span class="h-40 grow-1 bg-p-2"></span>
            <span class="h-40 grow-1 bg-p-1"></span>
          </div>
        </div>
      </div>
      <div class="w-1/4 flex-col h-100 p-5">
        <div class="flex-col grow-1 rounded-lg overflow-hidden">
          <div class="bg-s-10 grow-1 flex-col px-20 justify-center text-white">
            {{ LayoutState.theme.colors['success'] }}
          </div>
          <div class="h-40 flex-row">
            <span class="h-40 grow-1 bg-s-9"></span>
            <span class="h-40 grow-1 bg-s-8"></span>
            <span class="h-40 grow-1 bg-s-7"></span>
            <span class="h-40 grow-1 bg-s-6"></span>
            <span class="h-40 grow-1 bg-s-5"></span>
            <span class="h-40 grow-1 bg-s-4"></span>
            <span class="h-40 grow-1 bg-s-3"></span>
            <span class="h-40 grow-1 bg-s-2"></span>
            <span class="h-40 grow-1 bg-s-1"></span>
          </div>
        </div>
      </div>
      <div class="w-1/4 flex-col h-100 p-5">
        <div class="flex-col grow-1 rounded-lg overflow-hidden">
          <div class="bg-d-10 grow-1 flex-col px-20 justify-center text-white">
            {{ LayoutState.theme.colors['danger'] }}
          </div>
          <div class="h-40 flex-row">
            <span class="h-40 grow-1 bg-d-9"></span>
            <span class="h-40 grow-1 bg-d-8"></span>
            <span class="h-40 grow-1 bg-d-7"></span>
            <span class="h-40 grow-1 bg-d-6"></span>
            <span class="h-40 grow-1 bg-d-5"></span>
            <span class="h-40 grow-1 bg-d-4"></span>
            <span class="h-40 grow-1 bg-d-3"></span>
            <span class="h-40 grow-1 bg-d-2"></span>
            <span class="h-40 grow-1 bg-d-1"></span>
          </div>
        </div>
      </div>
      <div class="w-1/4 flex-col h-100 p-5">
        <div class="flex-col grow-1 rounded-lg overflow-hidden">
          <div class="bg-w-10 grow-1 flex-col px-20 justify-center text-white">
            {{ LayoutState.theme.colors['warning'] }}
          </div>
          <div class="h-40 flex-row">
            <span class="h-40 grow-1 bg-w-9"></span>
            <span class="h-40 grow-1 bg-w-8"></span>
            <span class="h-40 grow-1 bg-w-7"></span>
            <span class="h-40 grow-1 bg-w-6"></span>
            <span class="h-40 grow-1 bg-w-5"></span>
            <span class="h-40 grow-1 bg-w-4"></span>
            <span class="h-40 grow-1 bg-w-3"></span>
            <span class="h-40 grow-1 bg-w-2"></span>
            <span class="h-40 grow-1 bg-w-1"></span>
          </div>
        </div>
      </div>
      <div class="w-1/2 flex-col h-100 p-5">
        <div class="flex-col grow-1 rounded-lg overflow-hidden">
          <div class="bg-i-10 grow-1 flex-col px-20 justify-center text-white">
            {{ LayoutState.theme.colors['info'] }}
          </div>
          <div class="h-40 flex-row">
            <span class="h-40 grow-1 bg-i-9"></span>
            <span class="h-40 grow-1 bg-i-8"></span>
            <span class="h-40 grow-1 bg-i-7"></span>
            <span class="h-40 grow-1 bg-i-6"></span>
            <span class="h-40 grow-1 bg-i-5"></span>
            <span class="h-40 grow-1 bg-i-4"></span>
            <span class="h-40 grow-1 bg-i-3"></span>
            <span class="h-40 grow-1 bg-i-2"></span>
            <span class="h-40 grow-1 bg-i-1"></span>
          </div>
        </div>
      </div>             
    </div>
    <div class="border-2 border-s-10 p-20">
      <el-button type="primary">primary</el-button>
      <el-button type="success">success</el-button>
      <el-alert title="success alert" type="success" />

      <el-button type="warning">时间</el-button>
      <el-alert title="warning alert" type="warning" />

      <el-button type="danger" plain>danger</el-button>
      <el-alert title="error alert" type="error" />

      <el-button type="info" plain>info</el-button>
      <el-alert title="info alert" type="info" />
      <!-- <vmox-theme-container :colors="{'D':'0,255,0'}">
        <el-button type="danger" plain>primary2</el-button>
      </vmox-theme-container> -->
    </div>
  </div>
</template>

<script lang="ts">
import { useDark, useToggle } from '@vueuse/core'
import { ref, defineComponent } from "vue";
import { useCounterStore } from "@src/stores/pubState/counter";
import { ElInput } from "element-plus";
import { useLayoutStore } from "@src/comps/common/vmo-layout/state";

export default defineComponent({
  name:'them-pg',
  setup(props,context){
    const counter = useCounterStore();
    const scontext = ref("");
    const isDark = useDark();
    const shiftDark = useToggle(isDark);
    const LayoutState = useLayoutStore();
    function saveColor(){
      LayoutState.updateTheme({colors:LayoutState.theme.colors});
    };
    return {
      counter,
      scontext,
      LayoutState,
      shiftDark,
      saveColor
    }
  }
});

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>@src/stores/state/counter@src/stores/state/counter.s